<template>
  <div class="main">
    <div class="part-home-title">
      <hr class="hr" />
      <div class="title-text">学车流程</div>
      <div class="title-text2">
        驾考宝典整合学车全流程，驾考宝典为用户提供全方位学车服务
      </div>
    </div>
    <div class="content">
      <ul class="item clearfix">
        <li
          class="item-left icon1"
          v-for="(item, index) in list"
          :key="index"
          :style="{ background: 'url(' + item.icon + ') center top no-repeat' }"
        >
          <a target="_blank" href="#"
            ><span class="title">{{ item.title }}</span>
            <p>{{ item.desc }}</p></a
          >
        </li>
      </ul>
    </div>
    <div class="part-home-title" style="margin-top: 80px;">
      <hr class="hr" />
      <div class="title-text">宝典荣誉</div>
      <div class="title-text2">
        强大的驾考功能，优秀的用户体验，我们的愿景是学车无忧，轻松拿本
      </div>
    </div>
    <div class="content"><img src="https://www.jiakaobaodian.com/core-assets/static/images/common/home-dynamic.png"></div>
  </div>
</template>

<script>
export default {
  name: "StepView",
  data() {
    return {
      list: [
      { icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/0fc72e66088099891c2317a3e1da2b34.png", title: "找驾校", desc: "口碑好的驾校" },
      { icon: "https://jiakaobaodian.com/core-assets/jiakao/application/home/files/ea7968d83db78dd84782f5fb7cdb0ba4.png", title: "科目一", desc: "驾驶员理论考试" },
      { icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/1a6197c837b9e484084f9fe1b15c08fe.png", title: "科目二", desc: "场地驾驶技能考试科目" },
      { icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/8df30d2c3be0257c8acd81369e739479.png", title: "科目三", desc: "机动车驾驶人道路考试" },
      { icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/e63aa9a32b7a40551616e7f01654ec3e.png", title: "科目四", desc: "安全文明驾驶常识考试" },
      { icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/eb7d98a204cd7957135b8c131b0011a1.png", title: "拿本", desc: "开心拿本，安全驾驶" },
    ],
    };
  },
};
</script>

<style scoped>
.title:hover {
  color: #37b5f8;
}
a > p {
  color: #999;
  margin: 10px -20px;
}

.title {
  color: #333;
  display: block;
  font-size: 24px;
  font-family: "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.content ul.item > li.item-left > a {
  display: block;
  padding: 150px 40px 0;
  width: 210px;
  height: 211px;
}
.item-left {
}
.com-home-study-step > .content ul.item > li.item-left {
  float: left;
  width: 16.6%;
  line-height: 1.4;
}
.content {
  text-align: center;
}
.content ul.item {
  display: flex;
  margin: 0 -40px;
  justify-content: space-between;
}
.main {
  margin-top: 80px;
  padding: 0 10%;
}
.part-home-title {
  margin-bottom: 40px;
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
  color: #333;
  line-height: 1.01;
}
.part-home-title > .hr {
  height: 1px;
  border: none;
  border-top: 1px dotted #e9e9e9;
}
.part-home-title > .title-text {
  display: inline-block;
  margin-top: -20px;
  line-height: 41px;
  padding: 0 45px;
  background-color: #fff;
  font-size: 30px;
}
.part-home-title > .title-text2 {
  font-size: 16px;
  margin: 30px 0;
  color: #666;
}
</style>